<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="Team Management" name="TeamManagement"
        >Team Management</el-tab-pane
      > -->
      <el-tab-pane label="Task Board" name="TaskBoard">Task Board</el-tab-pane>
    </el-tabs>

    <div class="table-area">
      <!-- <div class="filter-line">
        <span> {{ activeLabel }}</span>
        <div class="btn-area">
          <el-button :icon="Filter">Filter</el-button>
          <el-button :icon="Download">Export</el-button>
          <el-button :icon="Plus">Add</el-button>
          <el-button type="danger" :icon="Delete">Delete</el-button>
        </div>
      </div> -->

      <div class="bottom-area">
        <div class="bottom-area-left">
          <div>{{ cityCode }}{{ "/" }} {{ lineCode }}</div>

          <div class="margin16">
            <span>Filters:</span>
            <el-select
              v-model="selectOne"
              @change="firstchangeHandle"
              clearable
              placeholder="Maintenance team"
            >
              <el-option
                v-for="item in teamArr"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="selectTwo"
              @change="secondChange"
              clearable
              placeholder="Assignee"
            >
              <el-option
                v-for="item in assignArr"
                :key="item.userName"
                :label="item.userName"
                :value="item.userName"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="selectThree"
              @change="threeChange"
              clearable
              placeholder="Wo Type"
            >
              <el-option label="CM" value="CM"> </el-option>
              <el-option label="PM" value="PM"> </el-option>
            </el-select>

            <el-select
              v-model="station"
              @change="stationChange"
              clearable
              placeholder="station"
            >
              <el-option
                v-for="item in stationArr"
                :key="item.stationCode"
                :label="item.stationCode"
                :value="item.stationCode"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="platoform"
              @change="platoformChange"
              clearable
              placeholder="platoform"
            >
              <el-option
                v-for="item in platoformArr"
                :key="item.platformCode"
                :label="item.platformCode"
                :value="item.platformCode"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="door"
              @change="doorChange"
              clearable
              placeholder="door"
            >
              <el-option
                v-for="item in doorArr"
                :key="item.areaCode"
                :label="item.areaCode"
                :value="item.areaCode"
              >
              </el-option>
            </el-select>
          </div>

          <div class="bottom4A">
            <span class="bottom4Column">Backlog</span>
            <span class="bottom4Column">To Do</span>
            <span class="bottom4Column">In Progress</span>
            <span class="bottom4Column">Complete</span>
          </div>
          <div v-if="!backlogData.length>0">please select...</div>
          <div class="bottom4" v-if="backlogData">
            <div class="bottom4Column">
              <div
                v-for="(item, index) in backlogData"
                :key="index"
                class="every-boxs"
              >
                <div>CM:{{ item.woNum }}</div>
                <div>woType: {{ item.woType }}</div>
                <div>locationId: {{ item.locationId }},</div>
                <div>assigneeDeptId:{{ item.assigneeDeptId }},</div>
                <div>assigneeDeptName: {{ item.assigneeDeptName }},</div>
                <div>assigneeBy: {{ item.assigneeBy }},</div>
                <div>
                  cityCode:
                  {{ item.location ? item.location.cityCode : "NULL" }}
                </div>
                <div>
                  lineCode:
                  {{ item.location ? item.location.lineCode : "NULL" }}
                </div>
                <div>
                  stationCode:
                  {{ item.location ? item.location.stationCode : "NULL" }}
                </div>
                <div>
                  platformCode:
                  {{ item.location ? item.location.platformCode : "NULL" }}
                </div>
                <div>
                  areaCode:
                  {{ item.location ? item.location.areaCode : "NULL" }}
                </div>
                <div>observations:{{ item.observations }}</div>
                <div>createTime:{{ item.createTime }}</div>
                <div>updateTime:{{ item.updateTime }}</div>
                <div>checklistId: {{ item.checklistId }}</div>
              </div>
            </div>

            <div class="bottom4Column">
              <div
                v-for="(item, index) in todoData"
                :key="index"
                class="every-boxs"
              >
                <div>CM:{{ item.woNum }}</div>
                <div>woType: {{ item.woType }}</div>
                <div>locationId: {{ item.locationId }},</div>
                <div>assigneeDeptId:{{ item.assigneeDeptId }},</div>
                <div>assigneeDeptName: {{ item.assigneeDeptName }},</div>
                <div>assigneeBy: {{ item.assigneeBy }},</div>
                <div>
                  cityCode:
                  {{ item.location ? item.location.cityCode : "NULL" }}
                </div>
                <div>
                  lineCode:
                  {{ item.location ? item.location.lineCode : "NULL" }}
                </div>
                <div>
                  stationCode:
                  {{ item.location ? item.location.stationCode : "NULL" }}
                </div>
                <div>
                  platformCode:
                  {{ item.location ? item.location.platformCode : "NULL" }}
                </div>
                <div>
                  areaCode:
                  {{ item.location ? item.location.areaCode : "NULL" }}
                </div>
                <div>observations:{{ item.observations }}</div>
                <div>createTime:{{ item.createTime }}</div>
                <div>updateTime:{{ item.updateTime }}</div>
                <div>checklistId: {{ item.checklistId }}</div>
              </div>
            </div>

            <div class="bottom4Column">
              <div
                v-for="(item, index) in inprogressData"
                :key="index"
                class="every-boxs"
              >
                <div>CM:{{ item.woNum }}</div>
                <div>woType: {{ item.woType }}</div>
                <div>locationId: {{ item.locationId }},</div>
                <div>assigneeDeptId:{{ item.assigneeDeptId }},</div>
                <div>assigneeDeptName: {{ item.assigneeDeptName }},</div>
                <div>assigneeBy: {{ item.assigneeBy }},</div>
                <div>
                  cityCode:
                  {{ item.location ? item.location.cityCode : "NULL" }}
                </div>
                <div>
                  lineCode:
                  {{ item.location ? item.location.lineCode : "NULL" }}
                </div>
                <div>
                  stationCode:
                  {{ item.location ? item.location.stationCode : "NULL" }}
                </div>
                <div>
                  platformCode:
                  {{ item.location ? item.location.platformCode : "NULL" }}
                </div>
                <div>
                  areaCode:
                  {{ item.location ? item.location.areaCode : "NULL" }}
                </div>
                <div>observations:{{ item.observations }}</div>
                <div>createTime:{{ item.createTime }}</div>
                <div>updateTime:{{ item.updateTime }}</div>
                <div>checklistId: {{ item.checklistId }}</div>
              </div>
            </div>

            <div class="bottom4Column">
              <div
                v-for="(item, index) in completeData"
                :key="index"
                class="every-boxs"
              >
                <div>CM:{{ item.woNum }}</div>
                <div>woType: {{ item.woType }}</div>
                <div>locationId: {{ item.locationId }},</div>
                <div>assigneeDeptId:{{ item.assigneeDeptId }},</div>
                <div>assigneeDeptName: {{ item.assigneeDeptName }},</div>
                <div>assigneeBy: {{ item.assigneeBy }},</div>
                <div>
                  cityCode:
                  {{ item.location ? item.location.cityCode : "NULL" }}
                </div>
                <div>
                  lineCode:
                  {{ item.location ? item.location.lineCode : "NULL" }}
                </div>
                <div>
                  stationCode:
                  {{ item.location ? item.location.stationCode : "NULL" }}
                </div>
                <div>
                  platformCode:
                  {{ item.location ? item.location.platformCode : "NULL" }}
                </div>
                <div>
                  areaCode:
                  {{ item.location ? item.location.areaCode : "NULL" }}
                </div>
                <div>observations:{{ item.observations }}</div>
                <div>createTime:{{ item.createTime }}</div>
                <div>updateTime:{{ item.updateTime }}</div>
                <div>checklistId: {{ item.checklistId }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="bottom-area-right">右边</div> -->
      </div>
    </div>

    <!-- <div class="tags-line">
    <el-tag v-for="(tag,index) in tags" :key="tag.name" closable :type="tag.type"
      @close="offHandle(index)"
    >
      {{ tag.name }}
    </el-tag>
</div> -->

    <!-- <el-table
      ref="tableRef"
      row-key="maintenanceTeam"
      :data="tableData"
      :default-sort="{ prop: 'maintenanceTeam', order: 'descending' }"
      style="width: 100%;"
      height="630px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column prop="city" label="City" width="180" />

      <el-table-column prop="trainLine" label="Train Line" width="180" />

      <el-table-column
        prop="maintenanceTeam"
        label="Maintenance Team"
        sortable
        width="180"
        column-key="maintenanceTeam"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />

      <el-table-column prop="teamLeader" label="Team Leader" width="180" />
      <el-table-column prop="teamSize" label="Team Size" width="180" />
      <el-table-column prop="created By" label="Created By" width="180" />
      <el-table-column prop="created Date" label="Created Date" width="180" />
      <el-table-column prop="users" label="Users" width="180" />
      <el-table-column prop="action" label="Action" width="180" />
    </el-table> -->

    <!-- 分页组件 -->
    <!-- <div class="pageArea">
      <pageComponents
        :needTotal="sendtotal"
        @sendCurpageNum="CurpageNumFn"
        @everyPageCount="everyPageCountFn"
      ></pageComponents>
    </div> -->
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance, watch } from "vue";
import {
  Edit,
  Search,
  Share,
  Upload,
  Filter,
  Delete,
  Download,
  Plus,
} from "@element-plus/icons-vue";
// 表格的相关引入
import { ref } from "vue";
import { ElTable } from "element-plus";
import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import pageComponents from "../components/pageComponents.vue"; //分页组件

const tableRef = ref();

export default {
  components: {
    Search,
    Delete,
    Filter,
    Download,
    Plus,
    pageComponents,
  },
  setup() {
    // 获取全局挂载的参数,main.jsY原型挂载
    const { proxy } = getCurrentInstance();
    const rq = proxy.$instance;
    const state = reactive({
      count: 0,
      // chooseMenu: ["Team Management", "User Management"],
      activeName: "TaskBoard", //被激活的菜单
      activeLabel: "Task Board",
      tableData: [
        {
          maintenanceTeam: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Home",
        },
        {
          maintenanceTeam: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Office",
        },
        {
          maintenanceTeam: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Home",
        },
        {
          maintenanceTeam: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
          tag: "Office",
        },
      ],
      // 选中的标签
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
      ],
      multipleSelection: [], //被选中的选项
      currentPage4: 4, //当前页数，支持 v-model 双向绑定
      pageSize4: 100, //每页尺寸

      sendtotal: 300, //总条数
      cityCode: "", //城市
      lineCode: "", //线路
      selectOne: "", //第一个选项
      teamArr: [], //第一个下拉的数组
      selectTwo: "", //第2个选项
      assignArr: [], //第2个下拉的数组
      selectThree: "",
      stationArr: [],
      station: "",
      platoformArr: [],
      platoform: "",
      doorArr: [],
      door: "",
      allData: [], //所有的数据
      backlogData: [],
      todoData: [],
      inprogressData: [],
      completeData: [],
    });

    // 被激活的菜单
    function handleClick(tab, event) {
      //   console.log(tab.props.label); //被选中的选项
      state.activeLabel = tab.props.label;
    }
    // 数据筛选
    const filterHandler = (value, row, column) => {
      console.log(value, "数据过滤");
      const property = column["property"];
      return row[property] === value;
    };

    // 勾选的选项
    const handleSelectionChange = (val) => {
      let data = JSON.parse(JSON.stringify(val));
      console.log(data, "选择的数据");
    };
    // 儿子传递过来的 参数
    function CurpageNumFn(params) {
      console.log(params, "当前页");
    }
    function everyPageCountFn(params) {
      console.log(params, "每页多少条");
    }

    // 关闭tags
    function offHandle(index) {
      console.log(index, "角标");
      state.tags.splice(index, 1);
    }

    onMounted(() => {
      state.cityCode = localStorage.getItem("cityCode");
      state.lineCode = localStorage.getItem("lineCode");
      // 获取第一个下拉
      rq.get("/system/dept/getAllTeam").then((res) => {
        state.teamArr = res.data.data;
      });

      // 获取第四个station下拉
      rq.get(
        `/system/location/cascadeQueryStation?cityCode=${"Chennai,India"}&lineCode=${"Chennai Suburban Railway"}`
      ).then((res) => {
        state.stationArr = res.data.data;
      });
    });

    function firstchangeHandle() {
      rq.get(`/system/user/getUserByTeamIds?teamIds=${state.selectOne}`).then(
        (res) => {
          state.assignArr = res.data.data;
        }
      );
    }

    function secondChange() {
      console.log(state.selectTwo, "第二个");
    }

    function threeChange() {
      console.log(state.selectThree, "第三个");
    }

    // 获取platform
    function stationChange() {
      // console.log(state.station, "第4个");
      rq.get(
        `/system/location/cascadeQueryStation?cityCode=${"Chennai,India"}&lineCode=${"Chennai Suburban Railway"}&stationCode=${
          state.station
        }`
      ).then((res) => {
        state.platoformArr = res.data.data;
      });
    }

    // 获取door
    function platoformChange() {
      // console.log(state.station, "第4个");
      rq.get(
        `/system/location/cascadeQueryStation?cityCode=${"Chennai,India"}&lineCode=${"Chennai Suburban Railway"}&stationCode=${
          state.station
        }&platformCode=${state.platoform}`
      ).then((res) => {
        // console.log(res.data.data,"door");
        state.doorArr = res.data.data;
      });
    }
    // 获取最终的数据
    function doorChange() {
      // areaCode是door  assigneeDeptId是team
      // console.log(state.door, "第door个");
      rq.get(
        `/core/workOrder/webList?areaCode=${state.door}&assignee=${
          state.selectTwo
        }&assigneeDeptId=${
          state.selectOne
        }&cityCode=${"Chennai,India"}&lineCode=${"Chennai Suburban Railway"}&platformCode=${
          state.platoform
        }&stationCode=${state.station}&woType=${state.selectThree}`
      ).then((res) => {
        console.log(res.data.data, "结果");
        // backlogData;
        // todoData;
        // inprogressData;
        // completeData;

        let tempArr = [];
        res.data.data.forEach((ele) => {
          if (ele.status === "NEW") {
            tempArr.push(ele);
          }
        });

        res.data.data.forEach((ele) => {
          if (ele.status === "REJECT") {
            tempArr.push(ele);
          }
        });
        state.backlogData = [...tempArr];

        // 第二种数据
        let tempArrB = [];
        res.data.data.forEach((ele) => {
          if (ele.status === "ASSIGNED") {
            tempArrB.push(ele);
          }
        });
        state.todoData = [...tempArrB];

        // 第3种数据
        let tempArrC = [];
        res.data.data.forEach((ele) => {
          if (ele.status === "INPRG") {
            tempArrC.push(ele);
          }
        });
        state.inprogressData = [...tempArrC];

        // 第4种数据
        let tempArrD = [];
        res.data.data.forEach((ele) => {
          if (ele.status === "CLOSE") {
            tempArrD.push(ele);
          }
        });
        state.completeData = [...tempArrD];
      });
    }

    return {
      ...toRefs(state),
      handleClick,
      Search,
      Delete,
      Filter,
      Download,
      Plus,
      handleSelectionChange,
      CurpageNumFn,
      everyPageCountFn,
      filterHandler,
      offHandle,
      firstchangeHandle,
      secondChange,
      threeChange,
      stationChange,
      platoformChange,
      doorChange,
    };
  },
};
</script>

<style lang="scss" scoped>
//去掉默认的table选择
::v-deep .el-tabs__content {
  display: none;
}
//第一行搜索框
.filter-line {
  display: flex;
  justify-content: space-between;
  background: #fff;
  height: 60px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
}
//btn-area  按钮样式
.filter-line .el-button {
  background: #3bcbbc;
  border: none;
  color: white;
}
//删除按钮的样式
.filter-line .el-button:nth-last-of-type(1) {
  background: #cb3b3b;
}
.pageArea {
  margin-top: 16px;
}
.tags-line {
  background: #fff;
}

.margin16 {
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.bottom-area {
  height: 82vh;
  background: #fff;
  box-sizing: border-box;

  padding: 16px;
  display: flex;
  .bottom-area-left {
    width:100%;

    .bottom4 {
      display: flex;
      overflow-y: scroll;
      height: 65vh;

      justify-content: space-between;
      .bottom4Column {
        width: 23%;

        .every-boxs {
          margin-top: 16px;
          border: 3px solid #3bcbbc;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .bottom4A {
      display: flex;
      justify-content: space-between;
      .bottom4Column {
        display: inline-block;
        width: 23%;
        text-align: center;
      }
    }
  }
  
}
</style>